<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/25
  Time: 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑部门</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-transfer-header{
            background-color: #FBFBFB;
        }
        .layui-transfer-header span{
            color: black !important;
        }
    </style>
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
    <h1 style="margin-bottom: 20px;">部门管理</h1>
    <input id="pageType" value="${pageType}" style="display: none">
    <!-- 表单区+返回按钮 -->
    <div style="background-color: white;">
        <div class="layui-row">
            <!-- 返回按钮 -->
            <div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
                <a href="/jsp/userManage/deptManage.jsp" class="layui-btn layui-btn-sm layui-btn-normal">
                    <i class="layui-icon layui-icon-left">返回</i>
                </a>
            </div>
        </div>
        <!-- 蓝色分割线 -->
        <hr class="layui-bg-blue">
        <form id="frm_dept" class="layui-form layui-form-pane" action="" style="padding-left: 110px;">
            <!-- 部门id -->
            <input id="dept_id" name="dept_id" value="${edit_dept.dept_id}" style="display: none">
            <!-- 第一排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input name="dept_name" required  lay-verify="required" value="${edit_dept.dept_name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input name="dept_tel" lay-verify="phone" value="${edit_dept.dept_tel}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第二排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">传真</label>
                    <div class="layui-input-block">
                        <input name="dept_fax" value="${edit_dept.dept_fax}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">Email</label>
                    <div class="layui-input-block">
                        <input name="dept_email" lay-verify="email" value="${edit_dept.dept_email}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第三排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input name="dept_addr" value="${edit_dept.dept_addr}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <!-- 第四排 -->
            <div class="layui-form-item">
                <!--部门穿梭框-->
                <div id="transfer_job" style="padding-left: 6px"></div>
            </div>
            <input id="jobIds" name="jobIds" style="display: none">
            <!-- 功能按钮 -->
            <div class="layui-form-item" style="padding: 15px 0;">
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="submitBtn">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    //form模块
    layui.use(['form','transfer'], function(){
        var form = layui.form;
        var transfer = layui.transfer;

        //监听提交
        form.on('submit(submitBtn)', function(data){

            var pageType = $("#pageType").val();//获取页面类型：1-修改
            var jobIds = parseTransferData(transfer.getData('jobTransfer'));

            if (jobIds == ''){

                layer.msg("请选择部门拥有的职位!");
                return false;
            } else {

                $("#jobIds").val(jobIds);
                //判断页面类型
                if (pageType == 1){

                    $("#frm_dept").attr("action","/deptManage/updateDeptById.do");
                }else {

                    $("#frm_dept").attr("action","/deptManage/addDept.do");
                }
            }
            return true;
        });

        //发送异步请求获取部门列表信息，渲染穿梭框
        $.ajax({
            url:'/deptManage/getJobList.do',
            data:{
                dept_id:$("#dept_id").val()
            },
            dataType:'json',
            success:function (result) {
                var data = result.data[0];
                var value = [];
                if(result.data.length > 1){
                    value = result.data[1];
                }
                //穿梭框渲染
                transfer.render({
                    elem: '#transfer_job',  //绑定元素
                    title:['职位','部门拥有职位'],
                    id: 'jobTransfer', //设定实例唯一索引，用于基础方法传参使用。
                    showSearch:true,//是否开启搜索
                    width:400,
                    height:300,
                    data:data,
                    value:value,
                    parseData: function(res) {
                        return {
                            "value": res.position_id, //数据值
                            "title": res.position_name //数据标题
                        }
                    }
                });
            }
        });
    });
</script>
</html>
